<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form
            :inline="true"
            :model="listQuery"
            ref="dataList2"
            class="demo-form-inline"
          >
            <el-select
              filterable
              v-model="listQuery.nobility_id"
              clearable
              class="filter-item marginRB10"
              placeholder="请选择购买爵位"
              style="width: 200px;"
            >
              <el-option
                v-for="item in nobilityListOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-input
              class="marginRB10"
              v-model="listQuery.keyword"
              placeholder="用户ID/昵称"
              style="width:200px;"
              clearable
            ></el-input>
            <el-button
              type="primary"
              @click="searchForm"
              icon="el-icon-search"
              class="marginRB10"
              >搜索
            </el-button>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table
          ref="dataList"
          :data="menuList"
          style="margin-bottom: 20px;"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="user_code" label="用户ID"></el-table-column>
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="head_picture" label="头像">
            <template slot-scope="scope">
              <el-popover placement="right" max-width="220" trigger="hover">
                <img
                  :src="scope.row.head_picture"
                  alt=""
                  style="max-width: 200px;max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="scope.row.head_picture"
                  alt=""
                  style="width: 50px;"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="nobility_name"
            label="购买爵位"
          ></el-table-column>
          <el-table-column prop="money" label="人民币"></el-table-column>
          <el-table-column prop="add_time" label="购买时间"></el-table-column>
          <el-table-column
            prop="expiration_time"
            label="有效期"
          ></el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="handleDialogClose"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="form"
        label-position="right"
        label-width="120px"
        style="width: 400px; margin: 0 auto;"
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="form.name" placeholder="请输入名字" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteData,
  listData,
  getExcel,
  nobilityList
} from "@/api/order/nobilityBuy";

export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        nobility_id: undefined,
        keyword: undefined
      },
      selectList1: [
        { key: undefined, lab: "全部上架状态" },
        { key: "1", lab: "上架" },
        { key: "2", lab: "下架" }
      ],
      menuList: [],
      nobilityListOptions: [],
      dialogFormVisible: false,
      dialogStatus: "",
      titleMap: {
        update: "编辑",
        create: "增加"
      },
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
    this.getNobilityList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let urlData = "?";
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}`;
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `&perPage=${this.listQuery.perPage}`;
      }
      if (this.listQuery.keyword) {
        urlData = urlData + `&keyword=${this.listQuery.keyword}`;
      }
      if (this.listQuery.nobility_id) {
        urlData = urlData + `&nobility_id=${this.listQuery.nobility_id}`;
      }

      listData(urlData).then(response => {
        this.menuList = response.data.list;
        this.total = response.data.meta.total;
        this.listLoading = false;
      });
    },
    searchForm() {
      this.listQuery.page = 1;
      this.getList();
    },
    getNobilityList() {
      nobilityList(this.listQuery).then(response => {
        this.nobilityListOptions = response.data;
      });
    },
    getExcel() {
      let urlData = "?";
      if (this.listQuery.keyword) {
        urlData = urlData + `start_time=${this.listQuery.keyword}`;
      }
      if (this.listQuery.nobility_id) {
        urlData = urlData + `&nobility_id=${this.listQuery.nobility_id}`;
      }
      urlData = urlData === "?" ? "" : urlData;
      getExcel(urlData).then(response => {
        location.href = response.data.download_url;
      });
    },
    handleCreate(row) {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
      this.form = [];
      this.form.id = row.id;
      this.form.name = row.name;

      this.dialogStatus = "update";
      this.dialogFormVisible = true;

      this.form = Object.assign({}, this.form);
    },
    handleDelete(row) {
      let data = { ids: row.id };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    allDel() {
      let delNum = [];
      this.$refs.dataList.selection.forEach(k => {
        delNum.push(k.id);
      });
      if (delNum.length === 0) {
        return;
      }
      let data = { ids: delNum.toString() };
      deleteData(data).then(response => {
        if (response.code === 200) {
          this.getList();
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid && this.dialogStatus === "create") {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined
              ? ""
              : formData.append(item, this.form[item]);
          }
          saveData(formData).then(response => {
            if (response.code === 200) {
              this.getList();
              this.$notify({
                type: "success",
                message: "操作成功",
                position: "bottom-right",
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        } else if (valid && this.dialogStatus === "update") {
          let formData = new FormData();
          for (let item in this.form) {
            this.form[item] === undefined
              ? ""
              : formData.append(item, this.form[item]);
          }
          updateData(formData).then(response => {
            if (response.code === 200) {
              this.getList();
              this.$notify({
                type: "success",
                message: "操作成功",
                position: "bottom-right",
                showClose: false,
                duration: 3000
              });
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: response.message,
                type: "error"
              });
            }
          });
        }
      });
    },
    resetForm() {
      this.form = {
        id: undefined,
        name: undefined
      };
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate(); // 清除整个表单的校验
      }
    }
  }
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

::v-deep .el-card__header {
  padding-bottom: 0;
}
</style>
